<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新增临时培训</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .blockElement {
            position: fixed !important;
            top: 50% !important;
        }

        .content {
            padding: 0px;
            padding-bottom: 0;
        }

        img {
            height: 100%;
            width: 100%;
            float: left;
            margin: 10px;
            object-fit: cover;

        }

        .user {
            height: 30px;
            line-height: 30px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .table-detail td.td-value2 {
            padding: 1px !important;
            text-align: left !important;
        }

        .pull-left {
            float: left;
            padding-left: 6px;
        }

        .td-value2 input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .td-value2 select {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
            color: #2a8cec;
        }

        .lineOne {
            text-align: left;
        }

        span {
            padding-left: 6px
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: black;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 34px;
        }

        .table-detail .td-module {
            font-weight: normal;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .user:hover {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .span-btn {
            /*position: absolute;*/
            left: 27px;
            margin-top: 0px;
            cursor: pointer;
        }

        .auditorName {
            text-align: center;
        }

        .IcoNormal {
            float: left;
            border-bottom: 0px;
            border-left: 0px;
            background-color: transparent;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            border-top: 0px;
            border-right: 0px;
            background-image: url(/dist/img/upload_normal.gif);
            background-repeat: no-repeat;
            float: left;
        }

        .progressobj {
            height: 20px;
        }

        .progressobj .delfile {
            float: left;
            margin-left: 10px;
        }

        .select {
            color: #fff;
            background-color: #045B9E;
        }

        td .sp-value {
            display: inline-block;
            padding-left: 6px;
            word-wrap: break-word;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: black;
        }

        .table-detail-payee:nth-child(even) td.td-title {
            background-color: white;
        }

        .printDiv {
            display: none;
        }

        .printInput {
            width: 200px;
        }

        .printBtn {
            margin: 0 auto;
            display: block;
        }

        #divUploadedFiles {
            /*padding: 4px;*/
            padding-bottom: 0;
        }

        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 6px;
            height: 6px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .moreListData {
            position: absolute;
            top: 30px;
            z-index: 111;
            display: none;
        }

        .moreListData .item {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .moreListData .item span {
            margin-right: 5px;
        }

        .ui_main {
            vertical-align: top;
        }

        .td20 {
            width: 20% !important;
        }

        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            padding: 0 4px;
            height: 29px;
            line-height: 29px;
            margin: 0 auto;
            width: 80px;
            /*margin-top: 9px;*/
            border-radius: 4px;
            display: block;
        }

        .webuploader-pick-hover {
            color: #fff !important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }

        .div-td-content-exam {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
            padding-bottom: 2px;
            background: #F9F9F9;
        }


        .div-td-content-exam .item {
            width: 10%;
            margin-right: 6px;
            margin-bottom: 6px;
            text-align: center;
            height: 30px;
            float: left;
            cursor: pointer;
            line-height: 30px;
        }

        .div-td-content-exam .item.active {
            background-color: #2a8cec;
            color: white;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .noFj {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            padding: 0 4px;
            height: 29px;
            line-height: 29px;
            margin: 0 auto;
            width: 80px;
            color: #ddd;
            cursor: no-drop;
            /* margin-top: 9px; */
            border-radius: 4px;
            display: block;
        }

        .scfj {
            background: url(/dist/img/fjT1.png) no-repeat 17px center;
            display: block;
            text-align: center !important;
            margin: 0 auto;
            width: 100%;
            border-radius: 4px;
            float: left;
            color: #74adf2;
            text-align: left;
        }

        .user {
            height: 29px;
            line-height: 29px;
            max-height: 23px;
            float: left;
            text-align: left;
            min-width: 28px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }


        .fj-tanzhongStyle .down {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

        .fj-tanzhongStyle .del {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

        .tijiaoBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 50%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }

        .fj-tanzhongStyle .name {
            float: left;
            text-overflow:  ellipsis;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            width: 50%;
        }

        .fj-tanzhongStyle .down {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

        .fj-tanzhongStyle .del {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

        .time-controller {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: center;
            font-size: 14px;
            background-color: rgba(37, 38, 45, .4);
        }

        .time-controller .time-controller-all {
            position: absolute;
            z-index: 600;
            bottom: 0;
            width: 100%;
            height: 273px;
            background: #fff;
        }

        .time-controller .time-controller-all .time-controller-choice {
            position: relative;
            height: 60px;
            color: #999;
        }

        .time-controller .time-controller-all .time-controller-content {
            position: relative;
            top: 20px;
            height: 173px;
        }

        .border-bottom,
        .border-top {
            position: relative;
        }

        .border-bottom:after,
        .border-bottom:before,
        .border-top:after,
        .border-top:before {
            content: "";
            display: block;
            position: absolute;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .border-bottom:after {
            border-bottom: 1px solid #ebebeb;
            left: 0;
            bottom: 0;
            width: 100%;
            -webkit-transform-origin: 0 bottom;
            transform-origin: 0 bottom;
        }

        .time-controller .time-controller-all .time-controller-choice .cancel {
            left: 0;
        }

        .time-controller .time-controller-all .time-controller-choice .sure {
            right: 0;
            color: #fc9153;
        }

        .time-controller .time-controller-all .time-controller-choice .time-controller-top {
            margin: 0;
            line-height: 60px;
            font-weight: 400;
            text-align: center;
            font-size: 18px;
            color: #333;
        }

        .time-controller .time-controller-all .time-controller-choice .cancel,
        .time-controller .time-controller-all .time-controller-choice .sure {
            position: absolute;
            top: 6px;
            padding: 16px;
            font-size: 14px;
        }

        .time-controller .time-controller-all .time-controller-content .time-package-top {
            position: absolute;
            top: 0;
            background: -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8));
            background: linear-gradient(bottom, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8));
        }

        .time-controller .time-controller-all .time-controller-content .time-package-bottom {
            position: absolute;
            bottom: 1px;
            background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8));
            background: linear-gradient(top, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8));
        }

        .time-controller .time-controller-all .time-controller-content .time-package-bottom,
        .time-controller .time-controller-all .time-controller-content .time-package-top {
            z-index: 10;
            width: 100%;
            height: 68px;
            pointer-events: none;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .border-top:before {
            border-top: 1px solid #ebebeb;
            left: 0;
            top: 0;
            width: 100%;
        }

        .time-controller .time-controller-all .time-package {
            display: -webkit-box;
            display: flex;
            padding: 0 16px;
        }

        .time-controller .time-controller-all .time-package .time {
            flex: 1;
            flex-basis: 1 e-9px;
            width: 1%;
            height: 173px;
            overflow: hidden;
            font-size: 20px;
        }

        .time-controller .time-controller-all .time-package .time:first-child {
            flex: 1.8;
        }

        .time-controller .time-controller-all .time-package .time .time-list {
            padding: 0;
            margin-top: 68px;
            line-height: 36px;
            list-style: none;
            transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .time-controller .time-controller-all .time-package .time .diff {
            transition-duration: 150ms;
        }

        .time-controller .time-controller-all .time-package .time .time-list .time-list-item {
            transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        span.lineOne {
            line-height: 27px !important;
            height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .touBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin: 0 auto;
            z-index: 11111;
        }

        .touBtn div {
            float: left;
            width: 50%;
            box-sizing: border-box;
            font-size: 16px;
        }

        .touBtn .line {
            height: 24px;
            width: 1px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 13px;
        }
        .oaBtn, .btn-primary, .btn-sm{
            padding:0px;
        }
    </style>
</head>
<body>
<section class="content iframeH" id="app" v-cloak>
    <div class="div-td-content-exam"><i></i>
        <div class="list" v-if="type==1">

            <div :class="item.select=='true'?'item active':'item'" v-for="item in companyList"
                 @click="selectItem(item)">{{item.name}}
            </div>
        </div>
        <div class="list" v-if="type==2">
            <div :class="item.select=='true'?'item active':'item'" v-for="item in departList" @click="selectItem(item)">
                {{item.departName}}
            </div>
        </div>
        <div class="list" v-if="type==3">
            <div :class="item.select=='true'?'item active':'item'" v-for="item in roleNameList"
                 @click="selectItem(item)">{{item.roleName}}
            </div>
        </div>
    </div>
    <div class="time-controller">
        <div class="time-controller-all">
            <div class="time-controller-choice border-bottom">
                <span class="cancel">取消</span>
                <span class="sure">确定</span>
                <h1 class="time-controller-top">选择时间</h1>
            </div>
            <div class="time-controller-content">
                <div class="time-package-top border-bottom"></div>
                <div class="time-package-bottom border-top"></div>
                <div class="time-package">
                    <div class="time">
                        <ul class="time-list diff">
                        </ul>
                    </div>
                    <div class="time">
                        <ul class="time-list">
                        </ul>
                    </div>
                    <div class="time">
                        <ul class="time-list">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="time-controller-bottom"></div>
        </div>
    </div>
    <table class="table-detail" border=0 cellSpacing=0 cellPadding=0
           style="width: 100%; table-layout:fixed;margin-bottom:50px;">
        <tbody>
        <tr class="no-print">
            <td colspan="4" class=" no-print td-module " style=" background-color: yellow;">基本信息</td>
        </tr>
        <tr class="no-print">
            <td style="background-color: rgb(245, 243, 243); width: 25%;">培训内容</td>
            <td class="td-value" colspan="3"><input v-model="info.description" type="text"
                                                    v-if="pageType=='edit'"/>
                <span v-else>{{info.description}}</span>
            </td>

        </tr>

        <tr class="no-print">
            <td style="background-color: rgb(245, 243, 243); width: 100px">截止时间</td>
            <td class="td-value" colspan="3">
                <div class="timeBox">
                    <div class="time">
                        <input type="text" id="time" readonly placeholder="请选择日期" style="color:#2a8cec;"/>
                    </div>
                </div>

            </td>

        </tr>
        <tr class="no-print">
            <td style=" width: 25%;background-color: rgb(245, 243, 243);">
                <div :class="pageType=='look'?'fujian fj noFujian':'scfj'" id="peiXun"
                     v-if="pageType=='edit'" @click="uploadFile()">上传附件
                </div>
                <!--<div v-else class="noFj">附&nbsp;&nbsp;&nbsp;件</div>-->
                <div v-else>培训材料</div>
            </td>
            <td colspan="3">
                <div class="fj-tanzhongStyle" v-for="(attach,i) in fileList" v-if="attach.name!=''">
                    <b :class="fjStyle(attach.name)"></b>
                    <div class="name" :title="attach.name" :style="pageType=='look'?'':''"
                         :title="attach.name" v-on:click="download(attach.url,attach.name)">{{attach.name}}
                    </div>
                    <div class="down"><span href="javascript:void(0)" class="nui-txt-link"
                                            style="color:#2a8cec;cursor: pointer;text-align: center;"
                                            v-on:click="download(attach.url,attach.name)">预览</span>
                    </div>
                    <div class="del"><span v-if="pageType=='edit'"
                                           class="nui-txt-link"
                                           style="color:#2a8cec;cursor: pointer;text-align: center;"
                                           v-on:click="deleteFileRP(i)">删除</span></div>
                </div>
                <div style="text-align: left" v-if="fileList.length<1"><span
                        style="color:#DDDDDD;">可以上传图片、PDF、Excel、Word、PPT</span></div>
            </td>
        </tr>


        <tr class="no-print" v-if="pageType=='look'">
            <td colspan="4" class=" no-print td-module "><span
                    :style="info.createUserId==userId?'padding-left: 84px;':'padding-left:0px;'">考核人员</span>
                <span style="background-color:white;color:black;float: right;padding-right: 6px;margin-right: 2px;cursor: pointer;text-align: center;"
                      @click="selectStaff()" v-if="info.createUserId==userId">修改考核人员</span></td>
        </tr>
        <tr class="no-print" v-else>

            <td colspan="4" style=" background-color: #d3e8fd;" class=" no-print td-module">
                <span style="margin-left: 84px;">考核人员</span>
                <span style="background-color:white;color:black;float: right;padding-right: 6px;margin-right: 2px;cursor: pointer;text-align: center;"
                      @click="lookUserList()">查看考核人员</span>
            </td>
        </tr>

        <template v-if="pageType=='look'">
            <tr class="no-print">
                <td style="background-color: rgb(245, 243, 243); width: 25%;">培训人数</td>
                <td style="width: 25%;"><span style="color:#2a8cec;cursor: pointer;text-align: center;  "
                                              @click="getUserByType(info,0)">{{info.allCount}}</span></td>
                <td style="background-color: rgb(245, 243, 243); width: 25%;">已通过人数</td>
                <td style="width: 25%;"><span style="color:#2a8cec;cursor: pointer;text-align: center; "
                                              @click="getUserByType(info,1)">{{info.passCount}}</span></td>
            </tr>
            <tr class="no-print">
                <td style="background-color: rgb(245, 243, 243);width: 25%;">未通过人数</td>
                <td style="width: 25%;"><span style="color:#2a8cec;cursor: pointer;text-align: center;  "
                                              @click="getUserByType(info,2)">{{info.unPassCount}}</span></td>
                <td style="background-color: rgb(245, 243, 243); width: 25%;">未作答人数</td>
                <td style="width: 25%;"><span style="color:#2a8cec;cursor: pointer;text-align: center;  "
                                              @click="getUserByType(info,3)">{{info.noAnswer}}</span>
                </td>
            </tr>
        </template>
        <template v-else>
            <tr class="no-print">
                <td style="background-color: rgb(245, 243, 243); width: 25%;">选择人员</td>
                <td colspan="3">
                    <div style="text-align: left;">
                        <span @click="selectStaff()"
                              v-if="pageType=='edit'"
                              style="color:#2a8cec;cursor: pointer;text-align: center;"
                        >{{info.haveKhFlag=='1'?'修改':'选择'}}</span>
                        <span @click="lookUserList()" v-else
                              style="color:#2a8cec;cursor: pointer;text-align: center;"
                        >查看</span>
                    </div>
                </td>
            </tr>
        </template>
        <tr>
            <td colspan="4" style=" background-color: yellow;" class=" no-print td-module">培训试题</td>
        </tr>
        <tr class="no-print">
            <td style="background-color: rgb(245, 243, 243); width: 25%;">培训试题</td>

            <td class="td-value"
                :style="pageType!='edit'?'width: 25%;text-align: center!important;border-right: 0px':'width: 25%;border-right: 0px'">
                <div style="">
                     <span v-if="pageType=='edit'"
                           style="color:#2a8cec;cursor: pointer;text-align: center" @click="saveMain('edit',1)"
                     >编辑&nbsp;&nbsp;</span>
                    <span href="javascript:void(0);" @click="see()" v-if="info.state!=-1"
                          style="color:#2a8cec;cursor: pointer;text-align: center"
                    >预览&nbsp;&nbsp;</span>
                    <span v-else style="color:#DDDDDD;cursor: pointer;text-align: center">预览&nbsp;&nbsp;</span>

                </div>
            </td>
            <td colspan="2"></td>

        </tr>


        <tr>
            <td class=" td-module" colspan="4">审批进度</td>
        </tr>
        <tr>
            <td class=" td-title" style="width:  25%;text-align: center!important;">审核人</td>
            <td class=" td-title" style="width:  25%;text-align: center!important;">审核状态</td>
            <td class=" td-title" style="width:  25%;text-align: center!important;">审核时间</td>
            <td class=" td-title" style="width:  25%;text-align: center!important;">{{pageType=='edit'?'操作':'审核意见'}}
            </td>
        </tr>
        <tr v-for="(item,i) in auditors">

            <td class="td-value" style=" width: 25%;text-align: center!important;">
                <input class="auditorName " type="text"
                       :value="item.auditorName" :idx="i" v-if="pageType=='edit'"
                       style="border: none;outline: none;color: #2a8cec;text-align: center;padding-left: 0px;"/>
                <span v-else style="color: #2a8cec;text-align: center;padding-left: 0px;">{{item.auditorName}}</span>
            </td>
            <td :style="auditFlagToName(item.auditFlag)=='待审核'?'width:  25%;color: red;':'width:  25%;color: #2a8cec;'">

                {{auditFlagToName(item.auditFlag)}}
            </td>
            <td style="color: #2a8cec;width: 25%;text-align: center !important;">{{timeSub(item.auditTime)}}</td>
            <td style="color: #2a8cec;width: 25%;text-align: left!important;">
                <button type="button" class="btn oaBtn btn-sm" style="min-width: 40px;float: left;"
                        @click="addItem(i)" v-if="pageType=='edit'">
                    添加
                </button>
                <button type="button" class="btn oaBtn btn-sm" style="min-width: 40px;float: right;"
                        @click="delItem(i)" v-if="pageType=='edit'">
                    删除
                </button>
                <span class="lineOne" v-if="pageType!='edit'">{{item.auditAdvise}}</span>
            </td>
        </tr>
        <tr class="no-print">
            <td class="td-title" style="width:  25%;">抄送人</td>
            <td colspan="3" class="td-value">
                <div id="user" style="padding-left:6px;"
                     v-on:click.stop="inputFocus('txtCopier')">
                    <div v-for="(user,i) in copiers" class="user"
                         v-bind:class="{ select: copierSelectedIdx == i }"
                         v-on:click="selectUser(i,'copierSelectedIdx')">{{user.copierName}};
                    </div>
                    <input id="txtCopier" v-if="pageType=='edit'" type="text" class="pull-left copier"
                           style="width: 100px;height:28px;padding-top: 2px !important;padding-left: 1px !important;"
                           @keyup.delete="deleteUser">
                </div>
            </td>
        </tr>

        <template v-if="auditHistory && auditHistory.length>0">
            <tr>
                <td class="td-title td-module" colspan="4"
                    style="text-align: center;width: 100%;color: black;">
                    历史驳回记录
                </td>
            </tr>
            <template v-for="(item,i) in auditHistory">
                <tr>
                    <td class="td-title" style="width:  25%;">驳回人</td>
                    <td style="width: 25%;text-align: center!important;" class="td-value">
                        <span>{{item.auditorName}}</span>
                    </td>
                    <td class="td-title" style="width:   25%;">驳回时间</td>
                    <td style="text-align: center;width: 25%;text-align: center!important;" class="td-value"><span>{{timeSub(item.auditTime)}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">驳回原因</td>
                    <td style="width: auto;text-align: left;" colspan="3" class="td-value">
                        <span style="color: #2a8cec;" class="lineOne">{{item.auditAdvise}}</span></td>
                </tr>
            </template>
        </template>
        </tbody>
    </table>

    <!--  <input type="button" value="保存草稿" @click="saveMain('','',1,-1)"
             v-if="pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1"
             class="tijiaoBtn"
             style="width:50%">
      <input type="button" value="提交申请" @click="saveMain('','',1,0)"
             v-if="pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1"
             class="tijiaoBtn"
             style="left: 50%">-->


    <!-- <input type="button" value="通过" @click="audit('tongguo')"
            v-if="pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0"
            class="tijiaoBtn">
     <input type="button" value="驳回" @click="audit('bohui')"
            v-if="pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0"
            class="tijiaoBtn" style="left: 50%">-->

    <!--
        <div   class="south no-print"      style="height:50px;line-height:50px;text-align:center;bottom:0;position: fixed;width: 100%;">
    -->
    <!-- <div value="" class=""  @click="saveMain('','',1,-1)"   v-if="pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1"
          style="background-color: #228bee;margin-left:-1px;width: 50%;float:left;color:#fff;font-size: 14px;position: relative;font-weight:bold;">
         <span style="position: absolute;width:1px;height:14px;font-size:20px;right:-1px;top:-3px;">|</span>
         保存草稿
     </div>
     <div value="" class=""  @click="saveMain('','',1,0)"
          v-if="pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1"
          style="background-color: #228bee;width: 50%;float:left;color:#fff;font-size: 14px;font-weight:bold;">提交申请
     </div>-->

    <div class="touBtn"
         v-if="(pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1)||(pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1)">
        <div @click="saveMain('','',1,-1)" v-if="pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1">保存草稿</div>
        <div @click="saveMain('','',1,0)" v-if="pageType=='edit'&&info.auditFlag!=0&&info.auditFlag!=1">提交申请</div>
        <i class="line"></i>
    </div>
    <div class="touBtn"
         v-else-if="(pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0)||(pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0)">
        <div @click="audit('tongguo')" v-if="pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0">通过
        </div>
        <div @click="audit('bohui')" v-if="pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0">驳回</div>
        <i class="line"></i>
    </div>
    <div class="touBtn" v-else-if="info.createUserId==userId&&(info.auditFlag==0||info.auditFlag==1)">
        <div style="width: 100%;" @click="upEtime()"
             v-if="info.createUserId==userId&&(info.auditFlag==0||info.auditFlag==1)">保存修改
        </div>
    </div>

    <!--
            <div value="" class="" @click="audit('tongguo')"   v-if="pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0"
                 style="background-color: #228bee;margin-left:0px;width: 50%;float:left;color:#fff;font-size: 14px;position: relative;border：0px;">
                <span style="position: absolute;width:1px;height:14px;font-size:20px;right:-1px;top:-3px;font-weight:bold;">|</span>
                通过
            </div>
            <div value="" class="" @click="audit('bohui')"    v-if="pageType=='look'&&info.currentAuditorId==userId&&info.auditFlag==0"
                 style="background-color: #228bee;width: 50%;float:left;color:#fff;font-size: 14px;border：0px;font-weight:bold;">驳回
            </div>
            <div value="" class="" @click="upEtime()"   v-if="info.createUserId==userId&&(info.auditFlag==0||info.auditFlag==1)"
                 style="background-color: #228bee;width: 100%;float:left;color:#fff;font-size: 14px;border：0px;">保存修改
            </div>-->

    <!--</div>-->

</section>


<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script type="text/javascript" src="/dist/js/pages/saleTarget/class.js"></script>
<script src="/dist/js/oaApp.js?t=558d0414"></script>
<script src="/page/apply/contract/Template.js?t=42e28def"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", ".lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 12 + "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        page: {
            urlParams: null,
            queryParams: {
                requestPage: 1,
                pageSize: 30
            },
            dataUrl: '',
            createQueryParams: function () {
            },
            getByPage: function (type) {
                $.ajax({
                    url: $.wyui.page.dataUrl,
                    data: JSON.stringify($.wyui.page.queryParams),
                    beforeSend: function () {

                    },
                    complete: function () {
                    },
                    success: function (r) {
                        $.wyui.page.queryParams.requestPage++;

                        if (r.data.sendData.pager && r.data.sendData.pager.pageCount == 0) {
                            r.data.sendData.pager.pageCount = 1;
                        }
                        if (type == "scroll") {
                            $.wyui.page.getByPage_scroll_callback(r.data.sendData.records);
                        } else {
                            if ($.wyui.page.getByPage_callback_new) {
                                $.wyui.page.getByPage_callback_new(r.data.sendData.records);
                            }
                        }

                    }
                });
            }
        },
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                        JSBridge.call(UI, 'showToast', {title: r.e.desc})
                    }
                },
                error: function (e) {
                    JSBridge.call(UI, 'showToast', {title: e.responseText})
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script>
    $(function () {
        $("body").on("click", ".changeValue", function (e) {
            var type = $(this).attr("attr-type");
            app.type = type;

            console.log(app.type)
            if (type == '1') {
                app.info.departNames = '';
                app.info.roleNames = '';
            }
            if (type == '2') {
                app.info.roleNames = '';
                app.selectDepart()
            }
            if (type == '3') {
                app.selectRoleName()
            }
            if ($(".div-td-content-exam").is(":hidden")) {
                el = $(this).parent().find(".td-value")
                $(".div-td-content-exam").css({
                    "width": el.outerWidth() + "px",
                    "left": el.offset().left,
                    "top": (el.offset().top + el.outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".div-td-content-exam").hide();
            }
        });
        $("body").on("click", ".div-td-content-exam", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-exam").hide();
        });
    });
</script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            copierSelectedIdx: -1,
            id: getUrlParamObj().id ? getUrlParamObj().id : '',
            page: getUrlParamObj().page ? getUrlParamObj().page : '1',
            pageType: getUrlParamObj().pageType ? getUrlParamObj().pageType : 'look',//页面类型
            isAdd: getUrlParamObj().isAdd ? getUrlParamObj().isAdd : 0,//页面类型
            userId: getUrlParamObj().userId,
            type: "1",
            info: {
                title: "",
                id: this.id,
                description: "",
                endTime: "",
                auditFlag: -2,
                companyNames: "",
                departNames: "",
                roleNames: "",
                companyIds: "",
                createUserId: getCurrentUser().id,
                createUserName: getCurrentUser().name,
                repaymentAttachName: "",
                repaymentAttachUrl: "",
                state: -1,
            },
            companyList: [],
            roleNameList: [],
            departList: [],
            companyNames: [],
            departNames: [],
            companyIds: [],
            roleNames: [],
            fileList: [],
            auditors: [],
            auditHistory: [],
            copiers: [],

        },
        methods: {
            selectUser: function (i, prop) {
                this.copierSelectedIdx = -1;
                this[prop] = i;
            },
            timeSub: function (time) {
                if (time) {
                    return new Date(time).Format(TimeFormat.middle)
                } else {
                    return '';
                }
            },
            saveMain: function (pageType, goback, save, auditFlag) {
                //预览 -1 look
                //编辑 0 edit
                //发布 1

                var that = this;

                delete that.info.createTime;
                if (save && that.info.auditFlag == 0) {
                    that.info.state = 1;
                }
                if (that.info.state == 1 && goback == 1) {
                    that.info.state = 0;
                }
                if (that.fileList && that.fileList.length > 0) {
                    var repaymentAttachNames = '';
                    var repaymentAttachUrls = '';
                    for (var i = 0; i < that.fileList.length; i++) {
                        repaymentAttachNames += that.fileList[i].name + ",";
                        repaymentAttachUrls += that.fileList[i].url + ",";
                    }
                    that.info.repaymentAttachName = repaymentAttachNames.substring(0, repaymentAttachNames.length - 1);
                    that.info.repaymentAttachUrl = repaymentAttachUrls.substring(0, repaymentAttachUrls.length - 1);
                }
                if (that.info.state && that.info.state == 1) {
                    that.info.auditFlag = 0;
                }
                if (auditFlag || auditFlag == 0 || auditFlag == -1) {
                    that.info.auditFlag = auditFlag;
                }
                that.info.copiers = that.copiers;
                that.info.auditors = that.auditors;
                if (that.info.auditFlag == 0) {
                    if (that.info.description == '') {
                        that.info.auditFlag = -2;

                        that.showToast("请填写培训内容");
                        return;
                    }
                    if (that.info.endTime == '') {
                        that.info.auditFlag = -2;

                        that.showToast("请填写截止时间");
                        return;
                    }
                    if (that.info.repaymentAttachUrl == '') {
                        that.info.auditFlag = -2;

                        that.showToast("请上传培训材料");
                        return;
                    }
                    if (that.info.haveKhFlag != 1) {
                        that.info.auditFlag = -2;

                        that.showToast("请选择考核人员");
                        return;
                    }
                    if (that.info.state != 0) {
                        that.info.state = -1;
                        that.info.auditFlag = -2;

                        that.showToast("请编辑培训试题");
                        return;
                    }
                }
                var time = $("#time").attr("attr-value");
                that.info.endTime = time;
                JSBridge.call(UI, 'showLoading', {})
                $.wyui.postMethod("/exam/saveExamMain.json", trimRN(that.info), function (data) {
                    that.info.id = data.id;
                    console.log(that.info.id)
                    //pageType
                    JSBridge.call(UI, 'hideLoading')
                    if (!save && pageType && pageType != '') {
                        var param = {
                            //顶部标题
                            url: '/page/exam/tempExamDetailApp.html?isAdd=0&pageType=edit&id=' + that.info.id + '&userId=' + that.userId,
                        }
                        JSBridge.call(UI, 'setUrl', param)

                        var param = {
                            screenType: '0',        //默认竖屏0, 横屏1
                            title: '新页面',         //顶部标题
                            url: '/page/exam/createApp.html?pageType=' + pageType + '&mainId=' + that.info.id + "&goback=" + goback,
                            showTitleBar: false,     //是否显示标题栏
                            enableRefresh: false,   //是否启用下拉刷新
                        }

                        setTimeout(function () {
                            JSBridge.call(ROUTER, 'navigateTo', param)
                        }, 200)

                        /*  var param = {
                              backRefresh: true,       //是否返回刷新
                          }
                          JSBridge.call(ROUTER, 'navigateBack', param)*/

                    }
                    if (save && save == 1) {
                        if (that.info.auditFlag == 0) {
                            that.showToast("提交成功");

                        } else {
                            that.showToast("保存成功");

                        }
                        var param = {
                            backRefresh: true,       //是否返回刷新
                        }
                        JSBridge.call(ROUTER, 'navigateBack', param)
                    }
                })
            },

            deleteUser: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.copierSelectedIdx > -1) {
                        this.copiers.splice(this.copierSelectedIdx, 1);
                        this.copierSelectedIdx = -1;
                    } else {
                        this.copierSelectedIdx = this.copiers.length - 1;
                    }
                }
            },
            upEtime: function () {
                var that = this;
                var time = $("#time").attr("attr-value");
                that.info.endTime = time;
                JSBridge.call(UI, 'showLoading', {})
                $.wyui.postMethod("/exam/updateEndTime.json", {
                    id: that.info.id,
                    endTime: that.info.endTime
                }, function (data) {
                    JSBridge.call(UI, 'hideLoading')
                    that.info.id = data.id;
                    that.showToast("修改成功");
                    var param = {
                        backRefresh: true,       //是否返回刷新
                    }
                    JSBridge.call(ROUTER, 'navigateBack', param)

                })
            },
            selectStaff: function () {
                var that = this;
                JSBridge.call(UI, 'showLoading', {})
                delete that.info.createTime;
                that.info.copiers = that.copiers;
                that.info.auditors = that.auditors;
                var time = $("#time").attr("attr-value");
                that.info.endTime = time;
                if (that.info.auditFlag != 0 && that.info.auditFlag != 1) {
                    if (that.info.auditFlag == -2) {
                        that.info.auditFlag = -2;
                    }
                    if (that.fileList && that.fileList.length > 0) {
                        var repaymentAttachNames = '';
                        var repaymentAttachUrls = '';
                        for (var i = 0; i < that.fileList.length; i++) {
                            repaymentAttachNames += that.fileList[i].name + ",";
                            repaymentAttachUrls += that.fileList[i].url + ",";
                        }
                        that.info.repaymentAttachName = repaymentAttachNames.substring(0, repaymentAttachNames.length - 1);
                        that.info.repaymentAttachUrl = repaymentAttachUrls.substring(0, repaymentAttachUrls.length - 1);
                    }
                    $.wyui.postMethod("/exam/saveExamMain.json", trimRN(that.info), function (data) {
                        that.info.id = data.id;
                        JSBridge.call(UI, 'hideLoading')
                        var param = {
                            //顶部标题
                            url: '/page/exam/tempExamDetailApp.html?isAdd=0&pageType=edit&id=' + that.info.id + '&userId=' + that.userId,
                        }
                        JSBridge.call(UI, 'setUrl', param)

                        setTimeout(function () {
                            var param = {
                                screenType: '0',        //默认竖屏0, 横屏1
                                title: '新页面',         //顶部标题
                                url: '/page/exam/selectStaffApp.html?userId=' + that.userId + '&mainId=' + that.info.id,
                                showTitleBar: false,     //是否显示标题栏
                                enableRefresh: false,   //是否启用下拉刷新
                            }
                            JSBridge.call(ROUTER, 'navigateTo', param)
                        }, 200)


                    })
                } else {
                    var param = {
                        screenType: '0',        //默认竖屏0, 横屏1
                        title: '新页面',         //顶部标题
                        url: '/page/exam/selectStaffApp.html?userId=' + that.userId + '&mainId=' + that.info.id,
                        showTitleBar: false,     //是否显示标题栏
                        enableRefresh: false,   //是否启用下拉刷新
                    }
                    JSBridge.call(ROUTER, 'navigateTo', param)
                }
            },
            audit: function (type) {
                var that = this;
                if (type == 'tongguo') {
                    var param = {
                        //title: "提示的标题",
                        content: "确定要通过吗",
                        cancelText: "取消",
                        confirmText: "通过",
                        showCancel: true,
                        cancelable: false
                    }
                    JSBridge.call(UI, 'showLoading', {})
                    that.dialogResult = "等待选择..."
                    JSBridge.call(UI, 'showDialog', param, function (res) {
                        var dialogResult = res.sendData.data;
                        if (dialogResult == '通过') {
                            advise = '同意！';
                            $.wyui.postMethod('/exam/applyAudit.json', {
                                id: that.id,
                                auditFlag: 1,
                                advise: '同意!',
                                userId: that.userId
                            }, function (r) {
                                JSBridge.call(UI, 'hideLoading')
                                var param = {
                                    backRefresh: true,       //是否返回刷新
                                }
                                JSBridge.call(ROUTER, 'navigateBack', param)
                            });
                        }
                    })
                } else {
                    $.dialog({
                        content: 'url:returnReasonApp.html?id=' + that.id + "&userId=" + that.userId,
                        title: '驳回',
                        width: 300,
                        height: 234,
                        max: false,
                        min: false,
                        lock: true
                    });
                }
            }
            ,
            addItem: function (i) {
                this.auditors.splice(i + 1, 0, new SaleTarget.Audit());
                setTimeout(function () {
                    initAutoComplete();
                }, 300)
            },
            delItem: function (i) {
                var that = this;
                if (this.auditors.length <= 1) {
                    that.showToast('请至少保留一位审核人！')
                    return ;
                }
                this.auditors.splice(i, 1);
            },

            auditFlagToName: function (auditFlag) {
                //auditFlag:-1,0,1,2,3,4,5,6
                switch (auditFlag) {
                    case "1":
                        return "已通过";
                        break;
                    case "2":
                        return "已驳回";
                        break;
                    case "0":
                        return "待审核";
                        break;
                    case "-1":
                        return "未提交";
                        break;
                    default :
                        return "未提交";
                        break;
                }
            },
            selectItem: function (item) {
                var check;
                if (this.type == '1') {
                    check = "companyNames"
                    this.checkedOne("companyIds", item.id);
                    this.checkedOne(check, item.name);
                } else if (this.type == '2') {
                    check = "departNames"
                    this.checkedOne(check, item.departName);
                } else {
                    check = "roleNames"
                    this.checkedOne(check, item.roleName);
                }
                if (item.select == "true") {
                    item.select = "false"
                } else {
                    item.select = "true"
                }
                console.log(item)

            },
            selectUser: function (i, prop) {
                this.copierSelectedIdx = i;
                this[prop] = i;
            },
            unselectUser: function () {
                this.copierSelectedIdx = -1;
            },
            changeName: function (string) {
                return string.replace(/,/g, "，")
            },
            uploadFile: function () {
                var that = this;
                if (that.pageType == 'edit') {

                    if (that.fileList && that.fileList.length < 1) {
                        JSBridge.call(FILE, 'uploadFile', {}, function (res) {
                            if (res.sendData.name && res.sendData.name != '') {
                                var attach = {
                                    name: res.sendData.name,
                                    url: res.sendData.url
                                }
                                that.fileList.push(attach);
                                that.showToast('上传成功')
                            }
                        })
                    } else {
                        JSBridge.call(FILE, 'uploadFile', {}, function (res) {
                            if (that.houZui(res.sendData.name)) {

                                if (res.sendData.name && res.sendData.name != '') {
                                    var attach = {
                                        name: res.sendData.name,
                                        url: res.sendData.url
                                    }
                                    that.fileList.push(attach);
                                    that.showToast('上传成功')
                                }
                            } else {
                                that.showToast('非图片类文件只能上传一个')
                            }
                        })
                    }
                } else {
                    return false;
                }
            },
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(UI, 'showToast', param)
            },
            houZui: function (name) {
                var that = this;
                if (name) {
                    var type = name.substring(name.lastIndexOf('.') + 1);
                    console.log(type)
                    var houZui = 'jpg gif png bmp tif emf wmf ico raw';
                    if (houZui.indexOf(type) >= 0) {
                        return true;
                    } else {
                        return false;
                    }
                    return true;
                } else {
                    if (that.info.repaymentAttachUrl.indexOf('jpg') != -1 || that.info.repaymentAttachUrl.indexOf('gif') != -1 || that.info.repaymentAttachUrl.indexOf('png') != -1 || that.info.repaymentAttachUrl.indexOf('bmp') != -1 || that.info.repaymentAttachUrl.indexOf('tif') != -1 || that.info.repaymentAttachUrl.indexOf('emf') != -1 || that.info.repaymentAttachUrl.indexOf('ico') != -1 || that.info.repaymentAttachUrl.indexOf('raw') != -1 || that.info.repaymentAttachUrl.indexOf('wmf') != -1) {
                        return true;
                    } else {
                        return false;
                    }
                }
                return false;
            },
            selectDepart: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.exam.getDepartListByCompanyIds, {companyIds: that.info.companyIds}, function (data) {
                    console.log(data)

                    for (var i = 0; i < data.result.length; i++) {
                        if (that.info.departNames.indexOf(data.result[i].departName) != -1) {
                            data.result[i].select = "true";
                        } else {
                            data.result[i].select = "false"
                        }
                    }
                    if (that.info.departNames != "") {
                        that.departNames = that.info.departNames.split(",");
                    } else {
                        that.departNames = []
                    }
                    that.departList = data.result
                })
            },
            selectRoleName: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.exam.getRoleNameListByCompanyAndDepart, {
                    companyIds: that.info.companyIds,
                    departNames: that.info.departNames
                }, function (data) {
                    console.log(data);
                    for (var i = 0; i < data.result.length; i++) {
                        if (that.info.roleNames.indexOf(data.result[i].roleName) != -1) {
                            data.result[i].select = "true";
                        } else {
                            data.result[i].select = "false"
                        }
                    }
                    if (that.info.roleNames != "") {
                        that.roleNames = that.info.roleNames.split(",");
                    } else {
                        that.roleNames = []
                    }
                    that.roleNameList = data.result
                })
            },
            checkedOne: function (checkList, moduleKey) {
                var idIndex = this[checkList].indexOf(moduleKey)
                if (idIndex >= 0) {
                    this[checkList].splice(idIndex, 1)
                } else {
                    this[checkList].push(moduleKey)
                }
                var checkedString = "";
                if (this[checkList].length > 0) {
                    for (var i = 0; i < this[checkList].length; i++) {
                        if (this[checkList][i] != "") {
                            checkedString += this[checkList][i] + ",";
                        }
                    }
                    this.info[checkList] = checkedString.substring(0, checkedString.length - 1);
                } else {
                    this.info[checkList] = ""
                }
                console.log(this.info)
            },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            download: function (url) {
                var that = this
                var param = {
                    url: url,
                }
                JSBridge.call(FILE, 'showFile', param)
                //downloadFile(attachId, fileName)
                return false;
            },
            deleteFileRP: function (i) {
                var that = this;
                var param = {
                    //title: "提示的标题",
                    content: "确定要删除该附件吗",
                    cancelText: "取消",
                    confirmText: "确定",
                    showCancel: true,
                    cancelable: false
                }
                that.dialogResult = "等待选择..."
                JSBridge.call(UI, 'showDialog', param, function (res) {
                    var dialogResult = res.sendData.data;
                    if (dialogResult == '确定') {
                        that.fileList.splice(i, 1);
                    }
                })

            },
            showDatePicker: function (e, item, type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.info.endTime = dp.cal.getNewDateStr();
                        return true;
                    },
                    dateFmt: 'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            lookUserList: function () {
                var that = this;
                var param = {
                    title: '考核人员',         //顶部标题
                    url: '/page/exam/tempExamUserListApp.html?id=' + that.info.id,
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            getUserByType: function (item, type) {
                var that = this;

                var title = '';
                switch (type) {
                    case  0:
                        title = '培训人员'
                        break;
                    case  1:
                        title = '已通过人员'
                        break;
                    case  2:
                        title = '未通过人数'
                        break;
                    case  3:
                        title = '未作答人数'
                        break;
                }
                //不要标题了
                title = '';

                var param = {
                    title: title,         //顶部标题
                    url: '/page/exam/tempExamUserListApp.html?id=' + item.id + '&userType=' + type,
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            see: function () {
                var that = this;
                var param = {
                    title: '预览详情',         //顶部标题
                    url: '/page/exam/previewApp.html?mainId=' + that.info.id + '&pageType=' + 'look' + '&goback=' + 0,
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            formatDate: function (now) {
                if (!now || now == '') {
                    return '';
                }
                var d = new Date(now);
                console.log("打印时间");
                console.log(d);
                var hour = d.getHours();
                var minute = d.getMinutes();
                var second = d.getSeconds();
                var month = d.getMonth() + 1
                var day = d.getDate();
                if (hour < 10) {
                    hour = "0" + hour;
                }
                if (minute < 10) {
                    minute = "0" + minute;
                }
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                return hour + ":" + minute + " " + month + "-" + day;
            },

        },
        mounted:

            function () {
                var that = this;
                var id = getUrlParamObj().id ? getUrlParamObj().id : '';
                that.info.id = id;
                pageType = getUrlParamObj().pageType ? getUrlParamObj().pageType : 'look';//页面类型
                isAdd = getUrlParamObj().isAdd ? getUrlParamObj().isAdd : 0;//页面类型
                userId = getUrlParamObj().userId;
                if (!that.info.createUserId || that.info.createUserId == '') {
                    that.info.createUserId = userId;
                }
                JSBridge.call(UI, 'showLoading', {})
                if ((isAdd == 0) || pageType == 'edit') {
                    //修改，掉借口
                    $.wyui.postMethod("/exam/getExamMainById.json", {id: that.info.id}, function (data) {
                        that.info = data.result;

                        that.auditors = data.auditors;
                        that.copiers = data.copiers;
                        that.auditHistory = data.history;
                        if (that.info.endTime) {
                            var data = new Date(that.info.endTime).Format(TimeFormat.middle);
                            $("#time").val(data);
                            $("#time").attr("attr-value", that.info.endTime);
                        }


                        for (var i = 0; i < that.auditors.length; i++) {
                            that.auditors[i].auditorName = that.auditors[i].auditorName;
                        }
                        var repaymentAttachNames = that.info.repaymentAttachName;
                        var repaymentAttachUrls = that.info.repaymentAttachUrl;
                        var repaymentAttachNameList = repaymentAttachNames.split(',');
                        var repaymentAttachUrlList = repaymentAttachUrls.split(',');
                        for (var i = 0; i < repaymentAttachUrlList.length; i++) {
                            if (repaymentAttachUrlList[i] && repaymentAttachUrlList[i].length > 0) {
                                var attach = {
                                    name: repaymentAttachNameList[i],
                                    url: repaymentAttachUrlList[i],
                                }
                                that.fileList.push(attach);
                            }
                        }

                        setTimeout(function () {
                            initAutoComplete();
                        }, 300);
                        JSBridge.call(UI, 'hideLoading')
                    })
                }
                if (isAdd && isAdd == '1') {
                    that.pageType = 'edit';
                    if (that.auditors && that.auditors.length > 0 && that.copiers && that.copiers.length > 0) {

                    } else {
                        $.wyui.postMethod("/exam/getAuditAndCopierList.json", {userId: userId}, function (data) {
                            that.auditors = data.auditors;
                            that.copiers = data.copiers;
                            for (var i = 0; i < that.auditors.length; i++) {
                                that.auditors[i].auditorName = that.auditors[i].auditorName;
                            }
                            setTimeout(function () {
                                initAutoComplete();
                            }, 300);
                        })
                        JSBridge.call(UI, 'hideLoading')
                    }

                }

            }
    })
</script>
<script>
    $(function () {
        initAutoComplete();
    });

    function initAutoComplete() {
        $(".auditorName,.copier").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                if ($(this).hasClass("auditorName")) {
                    var idx = $(this).attr("idx");
                    app.auditors[idx].userId = user.id;
                    app.auditors[idx].auditorName = user.name;
                    app.auditors[idx].roleName = user.roleName;
                } else if ($(this).hasClass("copier")) {
                    var userIds = new Array();
                    for (var i = 0; i < app.auditors.length; i++) {
                        userIds.push(app.auditors[i].userId);
                    }
                    for (var i = 0; i < app.copiers.length; i++) {
                        userIds.push(app.copiers[i].userId);
                    }
                    if ($.inArray(user.id, userIds) == -1) {
                        app.copiers.push({userId: user.id, copierName: user.name});
                    } else {
                        top.$.alert({
                            win: this,
                            height: 180,
                            width: 300,
                            icon: '3', //1成功 2失败 3提示 不穿代表无图标
                            title: "审核人、抄送人不能重复输入",
                            content: '',

                            blankclose: true,//点击空白是否可关闭
                            ok: "确定"
                        })
                    }
                    $(this).val("");
                } else if ($(this).hasClass("returnPayee")) {
                    app.main.returnPayeeId = user.id;
                    app.main.returnPayeeName = user.name;
                    app.main.returnPayeeRoleName = user.roleName;
                }
                return false;
            },
            height: 210,
            width: 300
        });
    }

</script>
<script>
    "use strict";

    //默认设置

    var _createClass = (function () {
        function defineProperties(target, props) {
            for (var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if ("value" in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor);
            }
        }

        return function (Constructor, protoProps, staticProps) {
            if (protoProps) defineProperties(Constructor.prototype, protoProps);
            if (staticProps) defineProperties(Constructor, staticProps);
            return Constructor;
        };
    })();

    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }

    var DEFAULT_OPTIONS = {
        appointDays: 7, //设置可以预约未来7天
        preTime: 10, //设置只能预约20分钟之后,如果两个小时就填120
        disMinute: 20 //分钟的间隔，设置十分钟
    };

    function datePicker() {
        var options =
            arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

        //最终的设置
        var CHOICE_OPTIONS = Object.assign({}, options, DEFAULT_OPTIONS),
            app = CHOICE_OPTIONS.appointDays,
            pre_min = CHOICE_OPTIONS.preTime % 60,
            dism = CHOICE_OPTIONS.disMinute,
            pre_hour = Math.floor(DEFAULT_OPTIONS.preTime / 60);

        var daysArr = [],
            hoursArr = [],
            minutesArr = [],
            //最终选择时间
            selectedYear = "",
            selectedDay = "",
            selectedHour = "",
            selectedMinute = "",
            //初始化时间
            initHour = void 0,
            initMinute = void 0,
            initHourArr = [],
            initMinuteArr = [],
            isToday = true,
            //初始化时间并获得当前时间
            date = new Date(),
            currentYear = date.getFullYear(),
            currentMonth = date.getMonth() + 1,
            currentDay = date.getDate(),
            currentHours = date.getHours() + pre_hour,
            currentMinutes = date.getMinutes();

        //筛选符合条件的时间
        var filterDate = (function (f) {
            //获取当前月有多少天
            var DayNumOfMonth = new Date(currentYear, currentMonth, 0).getDate(),
                //获取daysArr
                remainDay = DayNumOfMonth - currentDay,
                timeStamp = Date.now();

            for (var i = 0; i < app; i++) {
                var preStamp = timeStamp + 24 * 60 * 60 * 1000 * i,
                    _date = new Date(preStamp),
                    preYear = _date.getFullYear(),
                    preMonth = _date.getMonth() + 1,
                    preDay = _date.getDate();
                switch (i) {
                    case 0:
                        daysArr.push(
                            "\u4ECA\u5929(" + preMonth + "\u6708" + preDay + "\u65E5)"
                        );
                        break;
                    case 1:
                        daysArr.push(
                            "\u660E\u5929(" + preMonth + "\u6708" + preDay + "\u65E5)"
                        );
                        break;
                    case 2:
                        daysArr.push(
                            "\u540E\u5929(" + preMonth + "\u6708" + preDay + "\u65E5)"
                        );
                        break;
                    default:
                        daysArr.push(preMonth + "\u6708" + preDay + "\u65E5");
                        break;
                }
            }

            //如果是今天的23:30以后,那么今天的就不能选择
            if (currentHours == 23 && currentMinutes >= 60 - pre_min) {
                daysArr.shift();
            }

            for (var _i = currentHours; _i < 24; _i++) {
                hoursArr.push(_i);
                initHourArr.push(_i);
            }

            //如果当前的分钟超过pre_min(假设pre_min=30),则小时只能从下一个小时选择,当前时间3:40=>4:10
            if (currentMinutes + pre_min > 60 - dism) {
                hoursArr.shift();
                initHourArr.shift();
            }

            //如果hoursArr没有数据,说明今天已经不能预约,明天任何小时都可以预约
            if (!hoursArr.length) {
                for (var h = 0; h < 24; h++) {
                    hoursArr.push(h);
                    initHourArr.push(h);
                }
            }

            for (
                var j = Math.ceil(currentMinutes / dism) * dism + pre_min;
                j < 60;
                j += dism
            ) {
                minutesArr.push(j);
                initMinuteArr.push(j);
            }

            //如果分钟没有满足条件的,说明现在已经30分以后,小时会自动加1
            if (!minutesArr.length) {
                for (
                    var k = Math.ceil((currentMinutes + pre_min - 60) / dism) * dism;
                    k < 60;
                    k += dism
                ) {
                    minutesArr.push(k);
                    initMinuteArr.push(k);
                }
            }
        })();

        //初始化数据
        var initData = (function (f) {
            selectedDay = daysArr[0];
            selectedHour = initHour = initHourArr[0];
            selectedMinute = initMinute = initMinuteArr[0];
        })();

        var time = document.querySelectorAll(".time-list"),
            timeDay = time[0],
            timeHour = time[1],
            timeMinute = time[2];

        //初始化html结构
        var initHtml = (function (f) {
            var timeDayHtml = "",
                timeHourHtml = "",
                timeMinuteHtml = "";

            daysArr.forEach(function (ele) {
                timeDayHtml += '<li class="time-list-item">' + ele + "</li>";
            });

            hoursArr.forEach(function (ele) {
                timeHourHtml += '<li class="time-list-item">' + ele + "\u70B9</li>";
            });

            minutesArr.forEach(function (ele) {
                timeMinuteHtml += '<li class="time-list-item">' + ele + "\u5206</li>";
            });

            timeDay.innerHTML = timeDayHtml;
            timeHour.innerHTML = timeHourHtml;
            timeMinute.innerHTML = timeMinuteHtml;
        })();

        //修改选择器风格

        var datePicker = (function () {
            function datePicker(obj) {
                var initIndex =
                    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
                var callback = arguments[2];

                _classCallCheck(this, datePicker);

                this.obj = obj;
                this.index = -initIndex;
                this.callback = callback;
                this.deg = 0; //初始化偏转的角度
                this.length = this.obj.children.length;
                this.distance = this.obj.children[0].offsetHeight;
                this.ready();
            }

            _createClass(
                datePicker,
                [
                    {
                        key: "ready",
                        value: function ready() {
                            //初始化运动距离
                            datePicker.setTranslate3d(this.obj, this.index * this.distance);
                            //初始化3D偏转角度
                            datePicker.setRotateX(this.obj.children, this.index);
                            this.bind(this.obj);
                        }
                    },
                    {
                        key: "bind",
                        value: function bind(selector) {
                            var _this = this;

                            var iStartPageY = 0,
                                step = 1,
                                //弹性系数
                                prevPoint = 0,
                                speed = 0,
                                //手指离开时候的瞬时速度,速度越大,最后停留的越远
                                timer = null,
                                length = this.length - 1;

                            var touchstart = function touchstart(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                clearInterval(timer);
                                iStartPageY = e.changedTouches[0].clientY;
                                prevPoint = iStartPageY;
                            };
                            var touchmove = function touchmove(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                var iDisY = e.changedTouches[0].pageY - iStartPageY;
                                speed = e.changedTouches[0].pageY - prevPoint;
                                prevPoint = e.changedTouches[0].pageY;
                                //已滑动在头部或尾部,但是用户还想往上或下滑,这是给一种越往上或下滑越难拖动的体验
                                if (
                                    (_this.index == 0 && iDisY > 0) ||
                                    (_this.index == -length && iDisY < 0)
                                ) {
                                    step = 1 - Math.abs(iDisY) / selector.clientWidth; //根据超出长度计算系数大小，超出的越到 系数越小
                                    step = Math.max(step, 0); //系数最小值为0
                                    iDisY = parseInt(iDisY * step);
                                }
                                datePicker.setTranslate3d(
                                    selector,
                                    _this.index * _this.distance + iDisY
                                );
                                datePicker.setRotateX(
                                    _this.obj.children,
                                    _this.index + iDisY / _this.distance
                                );
                            };
                            var touchend = function touchend(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                var iDisX = e.changedTouches[0].pageY - iStartPageY;
                                //初速度很小的逻辑处理
                                var flag = false;
                                if (Math.abs(speed) <= 1) {
                                    flag = true;
                                }
                                timer = setInterval(function (f) {
                                    if (Math.abs(speed) <= 1) {
                                        clearInterval(timer);
                                        if (flag) {
                                            _this.index += Math.round(iDisX / _this.distance);
                                        }
                                        _this.index =
                                            _this.index > 0
                                                ? Math.min(_this.index, 0)
                                                : Math.max(_this.index, -length);
                                        _this.index =
                                            _this.index > 0
                                                ? 0
                                                : _this.index < -length
                                                ? -length
                                                : _this.index;
                                        selector.style.transitionDuration = "400ms";
                                        selector.addEventListener("webkitTransitionEnd", function (f) {
                                            //touchend事件触发后会有一个动画，触发完成后立即清除transition
                                            selector.style.transitionDuration = "0ms";
                                        });
                                        Array.from(selector.children).forEach(function (ele) {
                                            ele.style.transitionDuration = "200ms";
                                            ele.addEventListener("webkitTransitionEnd", function (f) {
                                                ele.style.transitionDuration = "0ms";
                                            });
                                        });
                                        datePicker.setTranslate3d(
                                            selector,
                                            _this.index * _this.distance
                                        );
                                        datePicker.setRotateX(_this.obj.children, _this.index);
                                        _this.callback && _this.callback(Math.abs(_this.index));
                                    } else {
                                        speed *= 0.2;
                                        iDisX += speed;
                                        _this.index += Math.round(iDisX / _this.distance);
                                    }
                                }, 13);
                            };
                            selector.addEventListener("touchstart", touchstart, false);
                            selector.addEventListener("touchmove", touchmove, false);
                            selector.addEventListener("touchend", touchend, false);
                        }
                    }
                ],
                [
                    {
                        key: "setTranslate3d",
                        value: function setTranslate3d(obj, dis) {
                            obj.style.transform = "translate3d(0," + dis + "px,0)";
                        }
                    },
                    {
                        key: "setRotateX",
                        value: function setRotateX(obj, index) {
                            var deg =
                                arguments.length > 2 && arguments[2] !== undefined
                                    ? arguments[2]
                                    : 25;

                            //设置每个Li的偏转角度
                            Array.from(obj).forEach(function (ele, i) {
                                obj[i].style.transform = "rotateX(" + (i + index) * deg + "deg)";
                            });
                        }
                    }
                ]
            );

            return datePicker;
        })();

        new datePicker(timeDay, 0, function (indexDay) {
            var timeHourHtml = "",
                timeMinuteHtml = "";
            //没有逗号，这个selectedDay是全局变量。。。
            selectedDay = daysArr[indexDay];
            //今天
            if (indexDay == 0) {
                isToday = true;
                //用户选择今天,但是此时的小时已不满足要求,小于当前时间,需要重置初始化小时选项
                hoursArr = initHourArr;
                hoursArr.forEach(function (ele) {
                    timeHourHtml += '<li class="time-list-item">' + ele + "\u70B9</li>";
                });
                timeHour.innerHTML = timeHourHtml;
                var hindex = selectedHour < initHour ? 0 : hoursArr.indexOf(selectedHour);
                //重置当前选择的时间,从明天滑回选择今天需要重置selectedHour
                selectedHour = hoursArr[hindex];
                new datePicker(timeHour, hindex, function (indexHour) {
                    selectedHour = hoursArr[indexHour];
                });
                //用户选择今天,但是此时的分钟已不满足要求,小于当前时间,需要重置初始化分钟选项
                if (hindex === 0) {
                    minutesArr = initMinuteArr;
                    minutesArr.forEach(function (ele) {
                        timeMinuteHtml += '<li class="time-list-item">' + ele + "\u5206</li>";
                    });
                    timeMinute.innerHTML = timeMinuteHtml;
                    var mindex =
                        selectedMinute < initMinute ? 0 : minutesArr.indexOf(selectedMinute);
                    //重置当前选择的时间,从明天滑回选择今天需要重置selectedMinute
                    selectedMinute = minutesArr[mindex];
                    new datePicker(timeMinute, mindex, function (indexMinute) {
                        selectedMinute = minutesArr[indexMinute];
                    });
                }
                //明天或者后天
            } else {
                //天数选择影响小时
                isToday = false;
                hoursArr = [];
                for (var h = 0; h < 24; h++) {
                    hoursArr.push(h);
                }
                var _hindex = hoursArr.indexOf(selectedHour);
                hoursArr.forEach(function (ele) {
                    timeHourHtml += '<li class="time-list-item">' + ele + "\u70B9</li>";
                });
                timeHour.innerHTML = timeHourHtml;

                new datePicker(timeHour, _hindex, function (indexHour) {
                    selectedHour = hoursArr[indexHour];
                });
                //天数选择影响分钟
                minutesArr = [];
                for (var m = 0; m < 60; m += dism) {
                    minutesArr.push(m);
                }
                var _mindex = minutesArr.indexOf(selectedMinute);
                timeMinuteHtml = "";
                minutesArr.forEach(function (ele) {
                    timeMinuteHtml += '<li class="time-list-item">' + ele + "\u5206</li>";
                });
                timeMinute.innerHTML = timeMinuteHtml;
                new datePicker(timeMinute, _mindex, function (indexMinute) {
                    selectedMinute = minutesArr[indexMinute];
                });
            }
        });

        new datePicker(timeHour, 0, function (indexHour) {
            var timeMinuteHtml = "";
            selectedHour = hoursArr[indexHour];
            //滑到头部,这是要处理分钟是否小于当前时间
            if (indexHour == 0 && isToday) {
                minutesArr = initMinuteArr;
                minutesArr.forEach(function (ele) {
                    timeMinuteHtml += '<li class="time-list-item">' + ele + "\u5206</li>";
                });
                timeMinute.innerHTML = timeMinuteHtml;
                var mindex =
                    selectedMinute < initMinute ? 0 : minutesArr.indexOf(selectedMinute);
                //重置当前选择的时间,从明天滑回选择今天需要重置selectedMinute
                selectedMinute = minutesArr[mindex];
                new datePicker(timeMinute, mindex, function (indexMinute) {
                    selectedMinute = minutesArr[indexMinute];
                });
            } else {
                minutesArr = [];
                for (var m = 0; m < 60; m += dism) {
                    minutesArr.push(m);
                }
                var _mindex2 = minutesArr.indexOf(selectedMinute);
                minutesArr.forEach(function (ele) {
                    timeMinuteHtml += '<li class="time-list-item">' + ele + "\u5206</li>";
                });
                timeMinute.innerHTML = timeMinuteHtml;
                new datePicker(timeMinute, _mindex2, function (indexMinute) {
                    selectedMinute = minutesArr[indexMinute];
                });
            }
        });

        new datePicker(timeMinute, 0, function (indexMinute) {
            selectedMinute = minutesArr[indexMinute];
        });

        //获得最后选择的时间
        var sureTime = function sureTime(e) {
            e.preventDefault();
            e.stopPropagation();

            var minute = selectedMinute < 10 ? "0" + selectedMinute : selectedMinute,
                hour = selectedHour < 10 ? "0" + selectedHour : selectedHour,
                day =
                    parseInt(selectedDay.split("月")[1]) < 10
                        ? "0" + parseInt(selectedDay.split("月")[1])
                        : parseInt(selectedDay.split("月")[1]),
                month =
                    parseInt(selectedDay.split("月")[0].slice(-1)) < 10
                        ? "0" + parseInt(selectedDay.split("月")[0].slice(-1))
                        : parseInt(selectedDay.split("月")[0].slice(-1)),
                year = month == 1 && day < app ? currentYear + 1 : currentYear;
            //IOS版本浏览器不兼容new Date('2017-04-11')这种格式化，故用new Date('2017/04/11')
            var timeStamp = new Date(
                year + "/" + month + "/" + day + " " + hour + ":" + minute
                ).getTime(),
                timeStr = selectedDay + " " + hour + "\u70B9" + minute + "\u5206";

            sessionStorage.setItem("timeStamp", timeStamp);
            sessionStorage.setItem("timeStr", timeStr);
            var id = $(".time-controller").attr("attrId");
            var data = new Date(year + "-" + month + "-" + day + " " + hour + ":" + minute).Format(TimeFormat.middle)
            $("#" + id).val(data);
            $("#" + id).attr('attr-value', year + "-" + month + "-" + day + " " + hour + ":" + minute);
            document.querySelector(".time-controller").style.display = "none";
        };

        //显示隐藏
        var toggle = function toggle(e) {
            e.preventDefault();
            e.stopPropagation();
            document.querySelector(".time-controller").style.display = "none";
        };
        document.querySelector(".sure").addEventListener("touchend", sureTime, false);
        document.querySelector(".cancel").addEventListener("touchend", toggle, false);
    }

    datePicker({
        appointDays: 7, //默认可以预约未来7天
        preTime: 10, //默认只能预约10分钟之后,如果两个小时就填120
        disMinute: 10 //分钟的间隔，默认一分钟
    });
    $(".time-controller").css("display", "none");
    $(document).on("click", ".timeBox input", function () {
        $(".time-controller").attr("attrId", $(this).attr("id"));
        $(".time-controller").css("display", "block");
    });

</script>
</body>
</html>